<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            h1{
                text-align: center;
                font-size: 100px;
                color:red;
            }
            span{
                display: inline-block;
                width: 100px;
                height: 50px;
                border: 1px solid black;
                line-height: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>抽奖</h1>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
        <span>11</span>
        <span>12</span>
        <button id="start">开始</button>
        <button id="end">停止</button>
        <script>
            var start = document.getElementById('start')
            var end = document.getElementById('end')
            var spans = document.getElementsByTagName('span');
            var timer;
            var a;
            start.onclick=function(){
                clearInterval(timer)
                timer = setInterval(function(){
                    for(var j=0;j<spans.length;j++){
                        spans[j].style.background='none';
                    }
                    a = parseInt(Math.random() * 13);
                    var b = spans[a];
                    b.style.backgroundColor = 'red';
                },100)
            }
            end.onclick=function(){
                clearInterval(timer)
            }
        </script>
    </body>
</html>